<template>
  <el-switch class="no-select" v-model="isDark" :before-change="toggleDark">
    <template #inactive-action>
      <el-icon>
        <svg viewBox="0 0 24 24">
          <path
            d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
            fill="currentColor"
          ></path>
        </svg>
      </el-icon>
    </template>
    <template #active-action>
      <el-icon>
        <svg viewBox="0 0 24 24">
          <path
            d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
            fill="currentColor"
          ></path>
        </svg>
      </el-icon>
    </template>
  </el-switch>
  &emsp;
</template>

<script setup>
import { ref } from 'vue'
import { useDark, useToggle } from '@vueuse/core'

const isDarkA = useDark()
const toDark = useToggle(isDarkA)
const props = defineProps({
  play: {
    type: Function,
    required: true
  },
  stop: {
    type: Function,
    required: true
  },
  reverse: {
    type: Function,
    required: true
  }
})

// 在子组件中直接调用父组件传递的方法
const play = () => {
  // 调用父组件传递的 play 方法
  // play() 方法触发动画
  props.play()
}

const reverse = () => {
  // 调用父组件传递的 stop 方法
  // finish() 方法停止动画
  props.reverse()
}
const isDark = ref(false)

const toggleDark = () => {
  isDark.value = !isDark.value
  const html = document.querySelector('html')

  if (html) {
    if (!isDark.value) {
      html.classList.remove('dark')
      html.classList.add('light')
      // toDark()
      play()
    } else {
      html.classList.remove('light')
      html.classList.add('dark')
      // toDark()
      // reverse()
      reverse()
    }
  }
}
</script>

<style scoped lang="scss">
.no-select {
  -webkit-user-select: none; /*webkit浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}
.el-switch {
  --el-switch-on-color: #2c2c2c;
  --el-switch-off-color: var(--el-border-color);
  --el-switch-border-color: #dde0e7;
}
</style>
